<template>
	<view :style="colorStyle">
		<view class="download" :style="style">
			<image src="/static/images/download1.png" class="img"></image>
			<view class="btom">
				<!-- <view class="btns" @click="download(2)">
					<image src="/static/images/download5.png" class="btn-img"></image>
					<view class="title">iphone版本下载</view>
				</view> -->
				<view class="btns" @click="download(1)">
					<image src="/static/images/download4.png" class="btn-img" style="height: 36rpx;"></image>
					<view class="title">Android版本下载</view>
				</view>
				<view class="ban">最新版本 1.2.0</view>
				<view class="quan">源科地坤版权所有 2021-2022</view>
			</view>
		</view>
		<!-- 微信浏览器蒙层 -->
		<view class="meng" v-if="show">
			<view class="mengs">
				<view class="mengs-l">
					<view>请在浏览器打开</view>
					<view>即可正常下载</view>
				</view>
				<view class="mengs-c">
					<image src="/static/images/download3.png" class="qimg"></image>
				</view>
				<image src="/static/images/download2.png" class="jimg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserCoupons
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		ANDROID_DOWNLOAD,
		IOS_DOWNLOAD
	} from "@/config/app.js"
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		mixins: [colors],
		data() {
			return {
				show: false,
				customBar:0
			};
		},

		onLoad() {
			// #ifdef APP-PLUS
			let that=this
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					if (e.platform == 'android') {
						that.customBar = e.statusBarHeight + 50
					} else {
						that.customBar = e.statusBarHeight + 45
					}
			
					// #endif
				}
			})
			// #endif
			
		},
		onShow() {
			// #ifdef H5
			this.show = this.isWeixin()
			// #endif
			
		},
		computed:{
			style() {
				let str="padding-top: 0;"
				// #ifdef APP-PLUS
				str = `padding-top: ${this.customBar}px;`
				// #endif
				return str
			},
		},

		methods: {
			//app下载
			download(e) {
				let url = e == 1 ? ANDROID_DOWNLOAD :IOS_DOWNLOAD
					console.log(encodeURI(url))
				// #ifdef H5
				window.location.href = url
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(encodeURI(url))
				
				// #endif

			},
			isWeixin() {
				return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
			}
		}

	}
</script>


<style lang="less" scoped>
	.download {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		bottom: 0;
		background: #FFFFFF;

		.img {
			width: 512rpx;
			height: 512rpx;
			margin: 88rpx auto 0;
			display: block;
		}

		.btom {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 750rpx;

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 540rpx;
				height: 98rpx;
				background: #04AE55;
				border-radius: 49px;
				margin: 0 auto 30rpx;
				overflow: hidden;

				.btn-img {
					width: 32rpx;
					height: 38rpx;
				}

				.title {
					padding-left: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 45rpx;
					font-size: 32rpx;
				}
			}

			.ban {
				text-align: center;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
				font-size: 24rpx;
				padding-top: 31rpx;
				text-align: center;
			}

			.quan {
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
				font-size: 24rpx;
				padding: 19rpx 0 58rpx;
				text-align: center;
			}
		}
	}

	.meng {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;

		.mengs {
			display: flex;
			padding: 0 48rpx 0 208rpx;
			box-sizing: border-box;
			overflow: hidden;

			.mengs-l {
				flex: 1;
				padding-top: 118rpx;

				view {
					color: rgba(255, 255, 255, .7);
					font-size: 30rpx;
					line-height: 44rpx;
				}
			}

			.mengs-c {
				flex: 0 0 78rpx;
				overflow: hidden;
				padding-top: 140rpx;

				.qimg {
					width: 55rpx;
					height: 54rpx;
					display: block;
				}
			}

			.jimg {
				flex: 0 0 184rpx;
				height: 160rpx;
			}

		}

	}
</style>
